<template>
    <view class="box">
        <u-index-list :scrollTop="scrollTop" :index-list="indexList" active-color="#0d9e13">
        	<view v-for="(item, index) in data" :key="index" >
        		<u-index-anchor :index="item.name" />
        		<view class="list-cell u-border-bottom" v-for="(nitem, nindex) in item.list" :key="nindex"
					@click="choose(nitem, nindex)">
        			{{nitem.name}}
        		</view>
        	</view>
        </u-index-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollTop: 0,
                indexList: '',
				data: [],
				keywords: '',
            }
        },
        onLoad() {
            this.getCity()
        },
        onPageScroll(e) {
        	this.scrollTop = e.scrollTop;
        },
        methods: {
			// 选择城市
			choose(nitem, nindex) {
				console.log(nitem, nindex)
                this.$removeSync('CITY_NAME')
                this.$removeSync('CITY_ID')
                uni.$emit("CHOOSE_CITY", nitem)
                this.$backT()
                // this.$ajax('set_city', {
                // 	userToken: this.$getSync('userToken'),
                //     city_id: nitem.id
                // }).then(ret => {
                // 	if (ret.status == 0) {
                // 		this.$removeSync('CITY_NAME')
                // 		this.$removeSync('CITY_ID')
                // 		uni.$emit("CHOOSE_CITY", nitem)
                // 		this.$backT()
                // 	} else {
                // 		this.$toast(ret.message);
                // 	}
                // });
			},
            
			getCity(){
				this.$ajax('get_city_list', {
					userToken: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.status == 0) {
						this.data = ret.data;
						this.indexList = ret.data.map(val => {
							return val.name;
						})
					} else {
						this.$toast(ret.message);
					}
				});
			},
		}
    }
</script>

<style lang="scss">
    .top {
        padding: 10rpx 20rpx 0;
    }

    // 搜索
    .search {
        flex: 1;
        height: 66rpx;
        background-color: #fff;
        border-radius: 66rpx;
        background-color: #f5f5f5;
        padding: 0 20rpx;
        overflow: hidden;

        image {
            display: block;
            width: 30rpx;
            height: 30rpx;
            margin-right: 20rpx;
        }

        input {
            flex: 1;
            font-size: 25rpx;
            color: #333;
        }
    }
    
    
    .place--title{
        font-size: 28rpx;
        color: #000000;
        margin-bottom: 25rpx;
    }
    
    .place{
        margin-bottom: 20rpx;
        
        .list{
            min-width: 162rpx;
            font-size: 24rpx;
            color: #ff4942;
            line-height: 60rpx;
            text-align: center;
            background-color: #fffafa;
            border: 1rpx solid #ff4942;
            padding: 0 10rpx;
            margin-bottom: 10rpx;
            margin-right: 10rpx;
        }
        
    }
    
    
    
    .list-cell {
    	display: flex;
    	box-sizing: border-box;
    	width: 100%;
    	padding: 10px 24rpx;
    	overflow: hidden;
    	color: $u-content-color;
    	font-size: 14px;
    	line-height: 24px;
    	background-color: #fff;
    }
</style>
